<template>
  <div class="home-page">
    <!-- 轮播图区域 -->
    <el-carousel indicator-position="outside" :autoplay="true" style="margin-top: 5px;">
      <el-carousel-item v-for="(item, index) in imageList" :key="index">
        <el-image
            style="width: 100%; height: 500px; object-fit: cover;"
            :src="item"
            fit="cover"
        />
      </el-carousel-item>
    </el-carousel>

    <!-- 课程展示区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-divider content-position="left">课程列表</el-divider>
      <!-- 课程展示 -->
      <el-col @click="handleCourseClick(item)" :span="6" v-for="(item, index) in courseList" :key="`course-${index}`">
        <el-card class="course-card">
          <el-image style="width: 100%; height: 200px; object-fit: cover;" :src="item.img" fit="cover"/>
          <div style="padding: 14px;"><span>课程标题：{{ item.title }}</span>
            <div>教练：{{ item.trainerName }}</div>
            <div>价格：¥{{ item.price }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新闻列表区域 -->
    <el-divider content-position="left">新闻列表</el-divider>
    <el-descriptions
        class-name="my-content"
        :column="3"
        size="default"
        :title="`标题：${item.title}`"
        v-for="(item, index) in newsList" :key="`news-${index}`"
        @click="handleNewsClick(item)"
    >
      <el-descriptions-item label="" width="10%">
        <img class="news-image" :src="item.img" :alt="item.title"/></el-descriptions-item>
      <el-descriptions-item label="" width="70%">
        <div v-html="item.content"></div>
      </el-descriptions-item>
      <el-descriptions-item label="发布时间" width="20%">{{ formatTime(item.time) }}</el-descriptions-item>
      <el-descriptions-item label="" width="100%">
        <el-divider>
          <el-icon>
            <star-filled/>
          </el-icon>
        </el-divider>
      </el-descriptions-item>
    </el-descriptions>

  </div>


  <!-- 课程的详情信息 -->
  <el-dialog v-model="dialogVisible" title="课程详情信息" :width="'80%'" :height="'90%'">
    <el-row :gutter="20" style="height: 500px;" class="course-info">
      <el-col :span="8" style="padding: 10px;">
        <!-- 教练个人信息 -->
        <div>
          <h3>教练个人信息</h3>
          <p>头像：
            <img :src="coachInfo.avatar" alt="头像" style="width: 100%; height: auto; object-fit: cover;">
          </p>
          <h3>姓名：{{ coachInfo.trainerName }}</h3>
          <p>等级：{{ coachInfo.level }}</p>
          <p>性别：{{ coachInfo.gender }}</p>
          <p>电话：{{ coachInfo.phone }}</p>
          <p>邮箱：{{ coachInfo.email }}</p>
          <p>介绍：{{ coachInfo.specialties }}</p>
          <p>证书：
            <img :src="coachInfo.certifications" alt="证书" style="width: 100%; height: auto; object-fit: cover;">
          </p>
        </div>
      </el-col>
      <el-col :span="4" style="padding: 10px;"></el-col>
      <el-col :span="12" style="padding: 10px;">
        <!-- 课程信息 -->
        <div>
          <h3>课程信息</h3>
          <p>
            <img :src="coachInfo.img" alt="课程主图" style="width: 100%; height: auto; object-fit: cover;">
          </p>
          <h3>标题：{{ coachInfo.title }}</h3>
          <p>类型：{{ coachInfo.categoryName }}</p>
          <p>开始时间：{{ formatTime(coachInfo.startTime) }}</p>
          <p>结束时间：{{ formatTime(coachInfo.endTime) }}</p>
          <p>时长：{{ coachInfo.duration }} 小时</p>
          <p>地址：{{ coachInfo.location }}</p>
          <p>优势介绍：{{ coachInfo.description }}</p>
          <p>价格：{{ coachInfo.price }}</p>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSubscribe">预约</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import {apiGet, apiPost} from "@/utils/api";
import {StarFilled} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {sessionStorage} from "@/utils/storage.ts";
import {formatTime} from "@/utils/time.ts";
const $route = useRoute();
let $router = useRouter()
const imageList = ref([]);
const courseList = ref([]);
const newsList = ref([]);
//定义是否弹出详情
let dialogVisible = ref<boolean>(false)
//选择的课程信息
const coachInfo = reactive({
  avatar: '',
  certifications: '',
  specialties: '',
  phone: '',
  email: '',
  courseType: '',
  img: '',
  gender: '',
  level: '',
  description: '',
  title: '',
  categoryName: '',
  maxParticipants: 0,
  duration: '',
  trainerName: '',
  price: 0,
  startTime: '',
  location: '',
  endTime: '',
  state: 0,
  courseId: 0,
  trainerId: 0
});
//初始化轮播图
const initBanner = async () => {
  const {data} = await apiGet("/banner/findAllData");
  data.forEach(item => {
    imageList.value.push(item.imgurl);
  })
}
//初始化课程
const initCourse = async () => {
  const {data} = await apiGet("/courses/findRandom");
  courseList.value = data
}
//初始化新闻
const initNews = async () => {
  const {data} = await apiGet("/sportsNews/findAll", {page: 1, limit: 3});
  newsList.value = data.data
}

//点击某一个新闻事件
const handleNewsClick = async (item) => {
  //跳转到新闻列表也
  await $router.push({path: '/sportsNews', query: {redirect: $route.path, id: item.newsId}})
  return;
};
//点击课程事件
const handleCourseClick = (item) => {
  Object.assign(coachInfo, item);
  dialogVisible.value = true
};
//预约事件
const handleSubscribe = async () => {
  let usertoken = sessionStorage.get('USER_TOKEN');
  //如果为空，提示请先登录，否则进行下一步
  if (!usertoken) {
    ElMessage.error("请先登录");
    //跳转到登录页面
    await $router.push({path: '/login', query: {redirect: $route.path}})
    return;
  }
  let parameter = {
    courseId: coachInfo.courseId,
    coachId: coachInfo.trainerId,
    status: 2
  }
  await apiPost('/bookings/add', parameter)
  dialogVisible.value = false
}
//组件挂载完毕
onMounted(async () => {
  await initBanner()
  await initCourse()
  await initNews()
})
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.course-card {
  margin-bottom: 20px;
}

:deep(.news-image) {
  width: 100px !important;
  height: 100px !important;
}

.news-content p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制在一个块级元素显示的文本的行数 */
  max-height: 40px; /* 根据行高计算最大高度 */
}

.course-info {
  height: 500px;
  overflow-y: auto;
}
</style>